<template>
  <div>
    <div v-if="!legendShow" class="map-tools-container">
      <dl @click="legendShow = true">
        <dt class="iconfont icon-tuli" style="font-size:24px;" />
        <dd>图例说明</dd>
      </dl>
    </div>
    <el-card v-else class="box-card">
      <div slot="header" class="clearfix">
        <span>设备状态图标说明</span>
        <span class="iconfont icon-cuohao" @click="legendShow = false" />
      </div>
      <el-tabs v-model="activeName" type="card">
        <el-tab-pane label="普通设备" name="first">
          <div class="text-item" style="margin:0 0 -16px 0">
            <p v-for="(item, index) in infos" :key="index" class="flex">
              <img alt="" :src="item.picture">
              <span>{{ item.name }}</span>
            </p>
          </div>
        </el-tab-pane>
        <el-tab-pane label="阀控设备" name="second">
          <div class="tip" style="padding-bottom:12px;">
            <span>左侧圆形分成四部分，上边分别代表阀控器的3、4端口状态，下边代表各端口所接电磁阀状态。
            </span>
            <div class="h12" />
            <span>右侧不同颜色代表左侧圆形不同区域所接设备的不同状态。</span>
          </div>
          <div class="h12" />
          <div class="text-item">
            <img class="img-b" src="http://api.zesi.com.cn/storage/fkq.png" alt="">
            <div class="fl">
              <p v-for="(item, index) in fkqColors" :key="index" class="flex">
                <span class="color-block mr12" :style="{background:item.color}" />
                <span>{{ item.name }}</span>
              </p>
            </div>
          </div>
        </el-tab-pane>
      </el-tabs>
    </el-card>
  </div>
</template>

<script>
export default {
  data() {
    return {
      activeName: 'first',
      legendShow: false,
      infos: [
        {
          name: '设备运行',
          color: 'green',
          picture: 'https://img.intelirri.com/device/dg/d_run.png'
        },
        {
          name: '设备停止',
          color: 'gray',
          picture: 'https://img.intelirri.com/device/dg/d_close.png'
        },
        {
          name: '设备掉线',
          color: 'gray',
          picture: 'https://img.intelirri.com/device/dg/d_break.png'
        },
        {
          name: '设备故障',
          color: 'gray',
          picture: 'https://img.intelirri.com/device/dg/d_trouble.png'
        }
      ],
      fkqColors: [
        {
          name: '打开',
          color: '#00923b'
        },
        {
          name: '关闭',
          color: '#999999'
        },
        {
          name: '故障',
          color: '#ff3300'
        }
      ]
    }
  },
  methods: {
    hideTuli() {
      this.$store.commit('device/setTuliShow', 0)
    }
  }
}
</script>

<style lang="scss" scoped>
  .tip{
    span{
      display:inline-block;
      line-height:1.5em;
      font-size:14px;
    }
  }
  .box-card {
    width: 298px;
    .el-card__body {
      padding: 0 32px;
    }
    span.iconfont {
      float: right;
      cursor: pointer;
      &:hover {
        color: #466ff3;
      }
    }
  }
  .text-item {
    img {
      width: 24px;
      height: 24px;
      margin-right: 12px;
      &.img-b{
        width:150px;
        height:150px;
        float:left;
        margin:4px 12px 0 0;
      }
    }
    p {
      align-items: center;
      padding:4px 0;
      span.color-block{
        display:inline-block;
        width:24px;
        height:24px;
        border-radius:50%;
      }
    }
  }
</style>
